Skip to content

feat: add a new switch component#960

Closed
JerryWu1234 wants to merge 72 commits intoqwikifiers:mainfrom
JerryWu1234:add_component_switch
Closed

feat: add a new switch component#960
JerryWu1234 wants to merge 72 commits intoqwikifiers:mainfrom
JerryWu1234:add_component_switch

Conversation

@JerryWu1234
Copy link
Copy Markdown
Contributor

@JerryWu1234 JerryWu1234 commented Sep 13, 2024 •
edited
Loading

What is it?

Switch Component Implementation

This PR implements a headless Switch component with the following features:

Features

  • WAI-ARIA compliant switch pattern using role="switch"
  • Keyboard navigation support (Space and Enter keys)
  • Support for disabled state
  • Two-way data binding with bind:checked signal
  • Configurable through props:
    • disabled
    • checked
    • onChange$
    • onClick$
    • autoFocus
    • defaultChecked

Test Coverage

  • Mouse interaction tests
  • Keyboard accessibility tests (Space, Enter, Tab)
  • Default property tests (checked, defaultChecked, disabled states)
  • ARIA attribute validation

Component Structure

  • SwitchRoot: Main component wrapper
  • SwitchInput: Core switch functionality
  • SwitchLabel: Accessible labeling

Usage Example

<Switch.Root bind:checked={checked}>
  <Switch.Label>Toggle Switch</Switch.Label>
  <Switch.Input />
</Switch.Root>

This implementation follows WAI-ARIA best practices and provides a flexible foundation for custom styling while maintaining accessibility.

Why is it needed?

Checklist:

  • My code follows the developer guidelines of this project
  • I have performed a self-review of my own code
  • I have ran pnpm change and documented my changes
  • I have add necessary docs (if needed)
  • Added new tests to cover the fix / functionality

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Sep 13, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: ab41ccc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Sep 13, 2024 •
edited
Loading

Open in StackBlitz

npm i https://pkg.pr.new/qwikifiers/qwik-ui@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/headless@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/styled@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/utils@960

commit: ab41ccc

@JerryWu1234 JerryWu1234 self-assigned this Nov 14, 2024
@JerryWu1234
Copy link
Copy Markdown
Contributor Author

JerryWu1234 commented Mar 2, 2025

Hey Jerry! Just went through the implementation. We're getting close!

A couple of areas of improvement:

  • Clicking outside the thumb (but still on the switch itself), does not toggle the switch
  • When hitting the space key, it will turn on then back off (rather than on like the enter key)
  • Certain accessibility features are missing (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
  • Every example seems to use a signal bind (this is usually only when the user wants to programmatically change something)

https://kobalte.dev/docs/core/components/switch/

I think this is a good source of inspiration to look at. Along with a set of resources I created here: https://docs.google.com/document/d/18eA8WfrYtdkrRpavyoG8EmT_uzPtzt24ifOOTKk5In8/edit?tab=t.0

For example, I think it makes a lot of sense to have a new component tied to a piece of markup for the thumb, rather than having it be on a pseudo element, since that would follow the principles of composability. The idea that pieces of markup and components can blend in with each other in a straightforward way.

Atomic Design is a good read if you'd like to look further into it.

I think TDD / adding some tests would help a lot to prevent regressions and keep things robust. We need some tests before we can put the switch component in the beta stage.

I done

@JerryWu1234
Copy link
Copy Markdown
Contributor Author

JerryWu1234 commented Mar 14, 2025

it's weird, I have no idea with this error. I didn’t delete the tailwind file

thejackshelton
thejackshelton reviewed Mar 15, 2025
View reviewed changes
Comment thread packages/kit-headless/src/components/switch/switch-input.tsx
Comment thread packages/kit-headless/src/components/switch/switch-input.tsx Outdated
Comment thread packages/kit-headless/src/components/switch/switch-input.tsx Outdated
Comment thread packages/kit-headless/src/components/switch/switch-root.tsx Outdated
Comment thread packages/kit-headless/src/components/switch/switch-input.tsx Outdated
onClick$={[handleClickSync$, handleClick$]}
>
<input
{...rest}
Copy link
Copy Markdown
Collaborator

@thejackshelton thejackshelton Mar 15, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we need 4 pieces here:

Switch.Track, Switch.Thumb, Switch.Trigger (a button or div), and Switch.HiddenInput

But this is based on the current structure. I would follow the research process here:

https://qwik.design/contributing/research/

Comment thread packages/kit-headless/src/components/switch/switch.test.ts Outdated
Comment thread packages/kit-headless/src/components/switch/switch.test.ts Outdated
Comment thread packages/kit-headless/src/components/switch/switch.test.ts Outdated
Comment thread packages/kit-headless/src/components/switch/switch.test.ts Outdated
Comment thread packages/kit-headless/src/components/switch/switch.test.ts Outdated
@thejackshelton
Copy link
Copy Markdown
Collaborator

thejackshelton commented Mar 15, 2025

I think we could merge this in as a draft state if you wanted to start consuming the current version.

With the current feedback above a lot of changes are still needed to be prod ready. (and processes have improved since this PR)

Props to the continued effort on this @JerryWu1234 💪 . Many parts of this were not documented, and have since been documented in qwik.design

I will start writing some docs on form support as well

@thejackshelton
Copy link
Copy Markdown
Collaborator

thejackshelton commented Mar 16, 2025

Hey Jerry! Here's the new docs on form handling:

https://qwik.design/contributing/forms/

@thejackshelton
Copy link
Copy Markdown
Collaborator

thejackshelton commented Apr 5, 2025

Hey @JerryWu1234 let's remove this changeset since this would upgrade Qwik UI by a major version

image

@JerryWu1234
Copy link
Copy Markdown
Contributor Author

JerryWu1234 commented Apr 9, 2025

Hey @JerryWu1234 let's remove this changeset since this would upgrade Qwik UI by a major version

image

OK

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 23, 2025

CLA Assistant Lite bot:
Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

I have read the CLA Document and I hereby sign the CLA

1 out of 2 committers have signed the CLA.
✅ @JerryWu1234
❌ @openhands-agent
You can retrigger this bot by commenting recheck in this Pull Request

@JerryWu1234 JerryWu1234 marked this pull request as draft June 4, 2025 06:39
@JerryWu1234 JerryWu1234 closed this Jun 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@thejackshelton thejackshelton thejackshelton left review comments

Assignees

@JerryWu1234 JerryWu1234

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@JerryWu1234 @thejackshelton @openhands-agent